<template>
	<view class="logins">
		<nav-bar isBack  title="设置" ></nav-bar>
		<!-- 顶部 -->
		<view class="setting">
		<view class="userMenuBox">
			<view class="item" @tap="openinfo(0)">
				<text class="left-text">头像</text>
				<image class="top-img" :src="user.headimg || 'https://cos.ryz1620.com/liankun/static/IMG280.png'"></image>
				<text class="iconfont icon-more"></text>
			</view>
			<view class="item" @tap="openshop()">
				<text class="left-text">用户名称<text class="right_name">{{user.nickname}}</text></text>
				<text class="iconfont icon-more"></text>
			</view>
			<view class="item" @tap="openshop()">
				<text class="left-text">手机号<text class="right_name">{{userMobile}}</text></text>
				<text class="iconfont icon-more"></text>
			</view>
			<view class="item" @click="clearCache">
				<text class="left-text">清除缓存</text>
				<text class="iconfont icon-more"></text>
			</view>
		</view>
        <view class="close_login" @click="loginOut">退出登录</view>
	  </view>	
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_enter from '@/service/login.js'
import service_my from '@/service/my.js'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
			token:'',
			user:'',
			userMobile:'',
		}
	},
	
	onShow() {
		this.$utils.getUrl()
		this.gitusers()
		this.userMobile = this.$store.state.index.userMobile
		this.token = uni.getStorageSync('token')
	},
	
	methods: {
		clearCache(){
			uni.showModal({
			    title: '提示',
			    content: '确定清除缓存?',
			    success: function (res) {
			        if (res.confirm) {
						uni.clearStorage()
			        } else{
						
					}
			    }
			});
		},
		gitusers() {
			service_my.getuser({
			}).then(res => {
				if (res.code == 1) {
					this.user =res.data.userinfo
				}
				
			}).catch(err => {
			
			})
		},
        loginOut(){
        	uni.showModal({
        	    title: '提示',
        	    content: '确定退出登录?',
        	    success:  (res)=> {
        	        if (res.confirm) {
        				let token = ''
        				let userId = ''
        				let userMobile = ''
        				this.$store.commit('index/SET_token', token)
        				this.$store.commit('index/SET_userMobile', userMobile)
        				this.$store.commit('index/SET_userId', userId)
        				uni.clearStorage();
        				uni.reLaunch({
        					url: '/pages/home/index/index'
        				});
        	        } else{}
        	    }
        	});
        	
        }
	}
}
</script>

<style lang="scss" scoped>
.logins{
	width: 100vw;height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.right_name{
	float: right;
	color: #999;
	font-size: 28rpx;
}
.top-img{
	position: absolute;
	    right: 60rpx;
	    top: 15rpx;
	    width: 70rpx;
	    height: 70rpx;
	    border-radius: 50%;
}
.close_login{
	position: absolute;
	bottom: 40rpx;
	left: 23%;
	width: 54%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #C3AB7C;
	border: 1px #C3AB7C solid;
	border-radius: 50rpx;
}
.userMenuBox{
	margin-top: 25rpx;
}
.userInfoBox {
			display: flex;
			color: #fff;
			padding: 0 30rpx 60rpx;
			font-size: 34rpx;
			align-items: center;
			position: relative;
			display: flex;
			.img-box {
				width: 120rpx;
				height: 120rpx;
				flex-shrink: 0;
				border-radius: 50%;
				overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.img-vip {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				top: 84rpx;
				left: 138rpx;
				background-color: #fff;
			}

			.text-box {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 20rpx;
				text {
					font-size: 30rpx;
					&:last-of-type {
						font-size: 24rpx;
						padding-top: 20rpx;
					}
				}
				.iconfont{
					display: inline-block;
					background:rgba(255,255,255,0.2);
					width: 150rpx;
					padding: 0 15rpx;
					border-radius: 30rpx;
					line-height: 42rpx;
					margin-top: 20rpx;
					&:last-of-type {
						padding-top: 0rpx;
					}
					
				}
				.icon-more{
					::before{
						float: right;
						margin-top: 6rpx;
					}
				}
			}

			.integral {
				min-width: 40rpx;
				padding: 10rpx 20rpx;
				border-radius: 50rpx;
				text-align: center;
				background-color: hsla(0, 0%, 100%, .822);
				font-size: 22rpx;
				color: #f77002;
				align-self: flex-end;
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

			}
		}

		.orderMenuBox {
			margin: 0 30rpx;
			position: relative;
			top: 0rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 4rpx 4rpx 10rpx 4rpx rgba(0,0,0,0.2);

			.row-1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				font-size: 30rpx;
				font-weight: 700;
				color: #686767;
                padding-bottom:10rpx;
				.right-text {
					font-weight: normal;
					font-size: 26rpx;
				}
			}

			.row-2 {
				display: flex;
				padding: 20rpx 0;

				.item {
					flex: 1;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;

					.icon {
						width: 50rpx;
						height: 50rpx;
					}

					text {
						font-size: 28rpx;
						color: #474646;
						margin-top: 10rpx;
					}
				}
			}
		}

		.userMenuBox {
			.item {
				display: flex;
				padding: 20rpx 30rpx;
				height: 100rpx;
				align-items: center;
				background-color: #fff;
				position: relative;
				.icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
				.left-text {
					flex: 1;
					font-size: 32rpx;
				}
				.icon-more{
				color: #999;
				}
				.right-text {
					font-size: 28rpx;
					color: #999;
					padding-right: 10rpx;
				}
			}
		}

</style>